<template>
  <temlate v-if="status">
    <div key="open" class="app-wrapper">
      <n-message-provider>
        <Layout />
      </n-message-provider>
      <div class="fixed right-11px top-0px cursor-pointer px-12px z-30 close-app" @click="close">
        <img :src="closeApp" alt="" class="cursor-pointer" />
      </div>
    </div>
  </temlate>
  <template v-else>
    <v-close key="close" @on-active="open" />
  </template>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import '@renderer/styles/index.scss'
import Layout from '@renderer/Layout/index.vue'
// import { onMounted } from 'vue'
import { useContextStore } from '@renderer/store/modules/context'
import closeApp from '@renderer/assets/closeApp.svg'
import VClose from '@renderer/views/close/index.vue'
import { useListStore } from './store/modules/list'
import { io } from 'socket.io-client'
import useHttp from './utils/http'
import { onBeforeMount } from 'vue'
const status = ref(true)
const contextStore = useContextStore()
const listStore = useListStore()
const onws = () => {
  const socket = io('wss://cdyydj.club/ws', {
    transports: ['websocket']
  })
  socket.on('connect', () => {
    listStore.setSocket(socket)
  })

  socket.on('data', (d) => {
    console.log(d)
  })
  // 监听每日推荐消息
  socket.on('daily', async () => {
    const { data: res } = await useHttp('/daily/c/current').get().json()
    if (res.value.code === 200) {
      listStore.setDaily(res.value.data)
    }
  })
}
onBeforeMount(async () => {
  window.electron &&
    window.electron.ipcRenderer
      .invoke('context')
      .then((res) => {
        console.log(res)
        contextStore.init(res)
      })
      .catch((e) => {
        console.log(e)
      })
  onws()
  const { data: res } = await useHttp('/daily/c/current').get().json()
  if (res.value.code === 200) {
    listStore.setDaily(res.value.data)
  }
})

const close = () => {
  window.electron?.ipcRenderer.send('close')
  status.value = false
}

const open = () => {
  window.electron?.ipcRenderer.send('open')
  status.value = true
}
</script>

<style scoped lang="scss">
.app-wrapper {
  height: 100%;
}
.close-app {
  background-color: rgb(65, 64, 64);
  padding: 5px 12px;
  border-radius: 4px;
}
</style>
